<template>
  <div>
    <el-container style="min-height: 100vh">
      <el-aside :width=" (sideWidth + 40) + 'px'" style="background-color: #001528;">
    <Aside :isCollapse="isCollapse" :logitextshow="logitextshow" />
  </el-aside>
  <el-container style="height:100vh">
    <el-header style="box-shadow: 2px 0 6px rgb(0 21 41 / 10%);;font-family:微软雅黑; border-bottom: 1px solid #d8dce5;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);}">
      <Header :collapseBtnClass="collapseBtnClass" @asideCollapse="collapse" :user="user" />
    </el-header>

    <el-main style="font-family:微软雅黑">
      <!-- 表示当前页面的子路由会在<router-view/>里面展示 -->
      <router-view @refreshUser="getUser"  />
    </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
import Aside from '@/components/Aside.vue';
import Header from '@/components/Header.vue';

export default {
  name: 'Manage',
  data(){ 
    return{
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logitextshow:true,
      user: {}
    }
  },
  components: {
    Aside,
    Header,
},
created() {
  //从后台获取最新的user数据
  this.getUser()
},
  methods:{
    collapse(){ //点击按钮触发
      this.isCollapse = !this.isCollapse;
      if(this.isCollapse){ //收缩
        this.sideWidth = 64;
        this.collapseBtnClass = 'el-icon-s-unfold';
        this.logitextshow=false;//隐藏logo文字
      } else { //展开
        this.sideWidth = 200;
        this.collapseBtnClass = 'el-icon-s-fold';
        this.logitextshow=true;//显示logo文字
      }
    },
    //获取用户最新的数据
    getUser() {
      let userName = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userName : ""
      if (userName) {
        // 从后台获取User数据
        this.request.get("/User/userName/" + userName).then(res => {
          // 重新赋值后台的最新User数据
          this.user = res.data
          // console.log(this.user.roleMenus)
        })
      }
    }
  }
}
</script>
